<style>
    .layui-form-label {
        text-align: left;
    }
</style>
<title>角色编辑</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>角色</cite></a>
        <a><cite>角色列表</cite></a>
        <a><cite>编辑角色</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-spacel5">
        <div class="layui-card">
            <div class="layui-card-header">编辑角色</div>
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class="layui-card-body" style="padding: 15px;">
                        <input type="hidden" name="roleId" id="menuId" value="{{ roleId}}">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label required">角色名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="roleName" lay-verify="required|roleName" autocomplete="off"
                                           placeholder="请输入角色名称" class="layui-input" value="{{ roleName}}">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">角色编码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="roleCode" autocomplete="off" placeholder="请输入角色编码"
                                           class="layui-input" value="{{ roleCode}}">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">角色类型</label>
                                <div class="layui-input-block layui-form" lay-filter="selFilter">
                                    <select name="roleType" id="roleType" lay-verify="required">
                                        <option value="1">管理员</option>
                                        <option value="2">普通角色</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block layui-form" lay-filter="selFilter">
                                    <select name="status" id="status" lay-verify="required" value="{{ status}}">
                                        <option value="0">有效</option>
                                        <option value="1">无效</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">描述</label>
                            <div class="layui-input-block">
                                <textarea type="text" name="roleDesc" placeholder="描述" class="layui-textarea">{{ roleDesc}}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="text-align: right">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-role">立即提交
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <a lay-href="/role/list" class="layui-btn layui-btn-primary">
                                    <i class="layui-icon layui-icon-return"></i>返回
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'laydate', 'tree', 'common'], function () {
        var $ = layui.$, admin = layui.admin, element = layui.element
                , layer = layui.layer
                , laydate = layui.laydate
                , form = layui.form, basePath = layui.common.basePath;
        form.render(null, 'component-form-group');
        admin.req({
            url: basePath + 'system/tsRole/findTsRoleById.do' //实际使用请改成服务端真实接口
            , data: {roleId: layui.router().search.roleId}
            , type: 'get'
            , done: function (res) {
                if (res.code == 0) {
                    form.val("component-form-group", res.data);
                } else {
                    layer.msg(res.msg);
                    return;
                }
            }, success: function (res) {
            }, error: function (res) {
            }
        });
        /* 监听提交 */
        form.on('submit(component-form-ts-role)', function (data) {
            admin.req({
                url: basePath + 'system/tsRole/edit.do' //实际使用请改成服务端真实接口
                , data: data.field
                , type: 'get'
                , done: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            location.hash = '/role/list';
                        });
                    } else {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        }, function () {
                        });
                        return;
                    }
                }, success: function (res) {
                    console.log(res)
                }, error: function (res) {
                    console.log(res)
                }
            });
            return false;
        });

    });


</script>